<template>
    <div v-show="isQuery" class="bread">
        <ul class="fl sui-breadcrumb">
            <li>
                <a href="#">全部结果</a>
            </li>
        </ul>
        <ul class="fl sui-tag">
            <li v-if="$route.query.trademark" class="with-x">{{ $route.query.trademark.split(":")[1] }}<i
                    @click="moveTradmark">×</i></li>
            <li v-if="$route.query.categoryName" class="with-x">{{ $route.query.categoryName }}<i @click="moveCategory">×</i>
            </li>
            <li v-if="$route.query.keyword" class="with-x">关键字：{{ $route.query.keyword }}<i
                    @click="moveKeyword">×</i></li>
            <li v-for="item in queryProps" class="with-x">{{ item.split(":").splice(1, 2).join(":") }}<i
                    @click="moveProps(item)">×</i></li>
        </ul>
    </div>
</template>

<script>
export default {
    name: "Bread",
    computed: {
        queryProps() {
            // 如果this.$route.query.props不存在，返回空数组
            if (!this.$route.query.props) return [];
            // 判断如果是数组直接返回，不是数组生成数组返回
            if (this.$route.query.props instanceof Array) return this.$route.query.props;
            return [this.$route.query.props];
        },
        isQuery(){
            // console.log(111111111,this.$route.query);
            let query = {...this.$route.query};
            delete query.order;
            console.log(2222,query)
            return Object.values(query).filter(v=>{
                // v必须有值，如果是数组长度不允许小于1
                if(v instanceof Array  && v.length===0)
                    return false;
                return v;
            }).length>0;
        }
    },
    methods: {
        // 移除属性
        moveProps(item) {
            console.log(this.queryProps, item);
            this.$router.goSearch({
                props: this.queryProps.filter(v => v !== item)
            })
            // this.$router.push({
            //     path: "/search",
            //     query: {
            //         ...this.$route.query,
            //         props: this.queryProps.filter(v => v !== item)
            //     }
            // })
        },
        // 移除品牌
        moveTradmark() {
            this.$router.push({
                path: "/search",
                query: {
                    ...this.$route.query,
                    trademark: undefined
                }
            })
        },
        moveCategory() {
            this.$router.push({
                path: "/search",
                query: {
                    ...this.$route.query,
                    categoryName: undefined,
                    category1Id: undefined,
                    category2Id: undefined,
                    category3Id: undefined
                }
            })
        },
        moveKeyword() {
            // 1
            // this.$router.push({
            //     path:"/search",
            //     query:{
            //         ...this.$route.query,
            //         keyword:undefined
            //     }
            // })

            // 2
            const query = {...this.$route.query};
            delete query.keyword;
            this.$bus.$emit("clearKeyword");
            this.$router.push({
                path: "/search",
                query
            })
        }
    }
}
</script>

<style lang="less" scoped>
.bread {
    margin-bottom: 5px;
    overflow: hidden;

    .sui-breadcrumb {
        padding: 3px 15px;
        margin: 0;
        font-weight: 400;
        border-radius: 3px;
        float: left;

        li {
            display: inline-block;
            line-height: 18px;

            a {
                color: #666;
                text-decoration: none;

                &:hover {
                    color: #4cb9fc;
                }
            }
        }
    }

    .sui-tag {
        margin-top: -5px;
        list-style: none;
        font-size: 0;
        line-height: 0;
        padding: 5px 0 0;
        margin-bottom: 18px;
        float: left;

        .with-x {
            font-size: 12px;
            margin: 0 5px 5px 0;
            display: inline-block;
            overflow: hidden;
            color: #000;
            background: #f7f7f7;
            padding: 0 7px;
            height: 20px;
            line-height: 20px;
            border: 1px solid #dedede;
            white-space: nowrap;
            transition: color 400ms;
            cursor: pointer;

            i {
                margin-left: 10px;
                cursor: pointer;
                font: 400 14px tahoma;
                display: inline-block;
                height: 100%;
                vertical-align: middle;
            }

            &:hover {
                color: #28a3ef;
            }
        }
    }
}
</style>